﻿@namespace BootstrapBlazor.Components
@inherits ValidateBase<string>

@if (IsShowLabel)
{
    <label class="form-label" required="@Required" for="@Id">@DisplayText</label>
}
<div class="@ClassString" @ref="SelectElement">
    <div class="@ToggleClassString" tabindex="0" hidefocus="true" outline="0" id="@Id" @onclick="@ToggleMenu">
        <div class="@PlaceHolderClassString">@PlaceHolder</div>
        <div class="icon-picker-items">
            @foreach (var item in SelectedItems)
            {
                @if (ShowCloseButton)
                {
                    <div class="icon-picker-item-group">
                        <span class="icon-picker-close" @onclick:stopPropagation @onclick="@(e => ToggleItem(item))">
                            <i class="fa fa-times"></i>
                        </span>
                        <span class="icon-picker-item">
                            <i class="@item.Value"></i>&nbsp;@item.Text
                        </span>
                    </div>
                }
                else
                {
                    <span class="icon-picker-item">
                        <i class="@item.Value"></i>&nbsp;@item.Text
                    </span>
                }
            }
        </div>
    </div>
    <div class="dropdown-menu-arrow shadow"></div>
    <div class="dropdown-menu">
        @if (ShowSearch)
        {
            <div class="search">
                <input type="text" class="search-text form-control" @bind="@SearchText" @bind:event="oninput" />
                <i class="fa fa-search" @onclick="@(() => OnQueryAsync() )" ></i>
                <i class="fa fa-trash" @onclick="@(() => ClearSearchClick() )" ></i>
            </div>
        }

        <div class="listview">
            <div class="listview-body">
                @foreach (var key in Items.GroupBy(x => x.GroupName).OrderBy(k => k.Key))
                {
                    <div class="listview-item-group">@key.Key</div>
                    @foreach (var item in key)
                    {
                        <DynamicElement class="listview-item" OnClick="@(()=> ToggleItem(item))" StopPropagation="true">
                            <div title="@item.Text" class="card text-center">
                                <div class="card-body" >
                                    <i class="@item.Value"></i>
                                </div>
                                </div>
                        </DynamicElement>
                    }
                }
            </div>
        </div>
    </div> 
</div>
<CascadingValue Value="this" IsFixed="true">
    @ChildContent
</CascadingValue>
